// message.js
var template = `
    <div class="message" v-if="isShow">
        <div :class="'content ' + level">
            <button @click="close" :class="level">X</button>
            <div class="text" v-if="message instanceof Array" v-for="msg in message">
                {{ msg }}
            </div>
            <div class="text" v-else>
                {{ message }}
            </div>
        </div>
    </div>
`;

let Message = {
    name: 'Message',
    data() {
        return {
            list: []
        }
    },
    props: {
        message: {
            // @see <a href="https://v3.cn.vuejs.org/guide/component-props.html#prop-%E9%AA%8C%E8%AF%81">Vue3 Prop 验证</a>
            type: [String, Array], required: true,
        },
        level: {
            type: String, default: 'success'
        },
        duration: {
            type: Number, default: 3,
        },
    },
    setup(props) {
        let {ref} = Vue;
        let isShow = ref(false);
        const show = () => {
            isShow.value = true;
        };
        const close = () => {
            isShow.value = false;
        };
        let {level} = props;
        if ('success' === level) {
            store.state.lastMessageTime = Date.now();
        }
        return {isShow, show, close};
    },
    created() {
        this.show();
    },
    template,
    watch: {
        isShow(nVal, oVal) {

        }
    }
};